*{
  margin: 0;
  padding: 0;
}
html,body{
  height: 100%;
  width: 100%;
}
.swiper-container{
  width: 100%;
  height: 100%;
  .swiper-slide{
    background-color: rgba(52,27,46,1);
    color:#fff;
    font-size: 30px;
    position: relative;
    overflow: hidden;
  }
  .first{
    .ball{
      position: absolute;
      left:0;
      top:0;
      width: 100%;
      transform:scale(0.3);
      opacity: 0.2;
    }
    .p1{
      position: absolute;
      left:0;
      bottom:0;
      width: 100%;
      transform:translateY(1000px);
    }
    .grjl{
      position: absolute;
      left: 0;
      top:20px;
      width: 100%;
    }
  }

  .first.current{
    .ball{
      opacity: 1;
      transform:scale(1) ;
      transition:all 1s;

      animation: rot 20s linear infinite 1.5s;
    }

    .p1{
      transform:translateY(0px);
      transition:all 1s 0.5s;
    }
  }

  .second{
    .p2{
      position: absolute;
      left:0;
      bottom:0;
      width: 100%;
      transform:translateY(500px);
    }
    .sg{
      position: absolute;
      left:50%;
      margin-left:-75px;
      width: 150px;
      height: 150px;
      top:10px;
      border-radius: 50%;

      transform:translateY(-500px);

    }
  }

  .second.current{
    .p2{
      transform:translateY(0px);
      transition:all 1s;
    }

    .sg{
      transform:translateY(0px);
      transition:all 1s;
    }
  }


  .thrid{
    .p3{
      position: absolute;
      left:0;
      bottom:0;
      width: 60%;
    }

    .list{
     transform:translateX(1000px);
    }
  }

  .thrid.current{
     .list{
       transform:none;
       transition:all 1s;
     }

    .list4{
       transition-delay: 0.5s;
    }
    .list5{
      transition-delay: 1s;
    }
  }

  @keyframes rot {
    0%{
      transform:rotate(0deg);
    }
    100%{
      transform:rotate(360deg);
    }
  }




}

.music{
  position: fixed;
  right:15px;
  top:15px;
  z-index:20;
}


.play{
  animation: rot 3s infinite linear;
}

.arr{
  position: fixed;
  width: 100px;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:20;
  animation: udown 2s infinite alternate;
}

@keyframes udown {
  0%{
    transform:translateY(0px) translateX(-50%);
  }

  100%{
    transform:translateY(20px) translateX(-50%);
  }
}

